<template>
    <div class="containerbox bgc-white">
		<uv-navbar title="答题分析" auto-back placeholder />
        <div class="test_cont flex_center_center">
            <view class="pt-100 mb-100">
				<p class="text-46 text-center text-yellow">{{ exercise && exercise.log ? exercise.log.rightRate : 0 }}<span class="text-26">%</span> </p>
				<p class="text-26 text-center text-gray">正确率</p>
			</view>
            <div class="flex items-center justify-between">
                <div class="flex flex-col items-center flex-1">
                    <p class="text-28 text-gray">答题时间</p>
                    <p class="text-30 mt-10">{{ exercise && exercise.log ? formatDate(exercise.log.submitTime) : '' }}</p>
                </div>
                <div class="flex flex-col items-center flex-1">
                    <p class="text-28 text-gray">答题用时</p>
                    <p class="text-30 mt-10">{{ exercise ? exercise.useTime : '' }}</p>
                </div>
            </div>

            <div class="card_box flex-col flex items-center">
                <p class="font24">答题卡</p>
                <p class="font18 text2" v-if="exercise && exercise.articleLimit">本次文章还可以做{{ exercise.surplusCount }}次</p>
                <div class="item_cont flex flex-wrap" v-if="exercise && exercise.log">
                    <div class="item flex_c_c font24" v-for="(item, index) in exercise.log.answer" :class="item.mark.isRight == 1 ? 'green' : 'red'" :key="index">{{ index + 1 }}</div>
                </div>
            </div>

            <div class="flex px-30 mt-60">
				<view class="btn bgc-primary" @click="showAnswer">查看答案</view>
				<view class="btn bgc-primary" @click="restart">重新开始</view>
				<view class="btn bgc-primary" @click="nextRead" v-if="exercise && exercise.nextArticle">下一关</view>
            </div>
        </div>
    </div>
</template>

<script>
import { getExerDetail_api } from '@/common/apis/course'
export default {
    data() {
        return {
            loading: false,
            exerciseId: '',
            userId: 0,
            exercise: {},
        }
    },
	onLoad(o) {
		this.exerciseId = o.examId
		this.getExercise()
	},
    methods:{
        async getExercise() {
            this.loading = true
            let res = await getExerDetail_api({id: this.exerciseId})
			this.exercise = res
			let useTime = res.useTime
			this.exercise.useTime = this.formatUseTime(useTime)
        },
        // 查看答案
        showAnswer() {
            let articleId = this.exercise.log.article.id || 0
            if (articleId) {
				uni.$fui.href('/pages/course/word-string/info', { exerciseId: this.exerciseId, articleId, analyze: 1 })
            }
        },
        // 重新开始
        restart() {
            if (this.exercise.articleLimit && !this.exercise.surplusCount) {
				uni.showToast({
					icon: 'error',
					title: '本次文章答题次数已用完'
				})
                return
            }
            let articleId = this.exercise.log.article.id || 0
            if (articleId) {
                let path = '/pages/course/word-string/info?exerciseId=' + this.exerciseId + '&articleId=' + articleId
                uni.$fui.href(path)
            }
        },
        // 下一关
        nextRead() {
            let articleId = this.exercise.nextArticle.id || 0
            if (articleId) {
                let path = '/pages/course/word-string/info?exerciseId=' + this.exerciseId + '&articleId=' + articleId 
                uni.$fui.href(path)
            }
        },
        // 将time转换成时分秒
        formatUseTime(useTime) {
            if (useTime) {
                let hour = parseInt(useTime / 3600)
                let min = parseInt((useTime - hour * 3600) / 60)
                let sec = parseInt(useTime - hour * 3600 - min * 60)
                if (hour < 10) {
                    hour = '0' + hour
                }
                if (min < 10) {
                    min = '0' + min
                }
                if (sec < 10) {
                    sec = '0' + sec
                }
                useTime = hour + ':' + min + ':' + sec
            }
            return useTime
        },
        formatDate(time) {
            if (time) {
                let createdTime = time.split('-')
                time = createdTime[0] + '.' + createdTime[1] + '.' + createdTime[2]
            }
            return time
        },
    }
}
</script>

<style lang="scss" scoped>
.btn{height: 80rpx; border-radius: 12rpx; flex: 1; text-align: center; line-height: 80rpx; color: #fff; font-size: 28rpx; display: flex; align-items: center; justify-content: center;}
.btn+.btn{margin-left: 20rpx;}	
.test_cont{
    width: 100%;
    height: 100%;
    .title{
        font-size: 30rpx;
        color: #1A1A1A;
    }
    .text{
        font-size: 40rpx;
        color: #F69B2C;
        margin-top: 40rpx;
    }
    
    
}
.time_box{
    margin-top: 40rpx;
    .label{color: #626780;margin-bottom: 2rem;}
}
.card_box{
	margin: 0 30rpx;
    background: #F7F8FA;
    border-radius: 16rpx;
    padding: 40rpx 0;
    margin-top: 100rpx;
    .text2{margin-top: 1rem;}
    .item_cont{
        max-width: 80%;
        margin-top: 40rpx;
        flex-wrap: wrap;
        .item{
            width: 60rpx;
            height: 60rpx;
			line-height: 60rpx;
			text-align: center;
            border-radius: 50%;
            color: #fff;
            margin-right: 30rpx;
            margin-bottom: 30rpx;
        }
        .green{background: #19C14B;}
        .red{background: #FF5252;}
    }
}
.btn_cont{
    margin-top: 4rem;
    .icon{
        width: 3rem;
        height: 3rem;
        margin-right: 1rem;
    }
}
</style>